<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
			
	<a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js"/>
	<a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js"/>
	
	<script>
		Effect.Transitions.Elastic = function(pos) {
	    	return -1*Math.pow(4,-2*pos) * Math.sin((pos*3-1)*(3*Math.PI)/2) + 1;
		};
	</script>

	<h:commandButton  onclick="new Effect.BlindUp($('mypanel'), {duration:.3});return false" value="Hide" />
	<h:commandButton  onclick="new Effect.BlindDown($('mypanel'),{duration:1.5,transition:Effect.Transitions.Elastic});return false" value="Show" />

	<div>
		<rich:spacer height="20" />

		<rich:panel  id="mypanel">
			<f:facet name="header">
				<h:outputText value="Using Scriptaculous Effects"/>
			</f:facet>

			<h:form>
				<h:panelGrid styleClass="rsPanel" width="250" columns="2">
					<h:outputText styleClass="rsLabel" value="Name:" />
					<h:inputText  styleClass="rsInput"  value="#{userBean.name}" />
					
					<h:outputText styleClass="rsLabel" value="Job:" />
					<h:inputText  styleClass="rsInput"  value="#{userBean.job}" />
					
					<h:panelGroup />
					<h:commandButton styleClass="rsButton"  value="Submit">
						<a4j:support  disableDefault="true" event="onclick" reRender="out" />
					</h:commandButton>
					
					<f:facet name="footer">
					</f:facet>
							
				</h:panelGrid>
			</h:form>			
			<h:panelGrid id="out" columns="1">
				
			<h:outputText value=""/>
			<h:outputText value="You have just entered:"/>
			<h:outputText value="Name: #{userBean.name}" />
			<h:outputText value="Job: #{userBean.job}" />
			</h:panelGrid>
				
		</rich:panel>

		<rich:spacer height="20" />
	</div>

</ui:composition>